<template>
  <!-- :disabled="showCouponList || oilGunOrUserShow"  ：  在选择员工油枪以及选择优惠券时禁用下拉刷新事件 -->
  <van-pull-refresh
    v-model="isLoading"
    @refresh="onRefresh"
    :disabled="showCouponList || oilGunOrUserShow || isShowOilEnginDialog"
  >
    <div class="remitDiv" v-if="isShowPage">
      <div class="top_bg"></div>
      <div
        class="fuel_remit_wraper"
        :class="[showKeyboard || showRemitPage ? 'active' : '']"
      >
        <div class="fuel_remit_nav" @click="goFuelPage()">
          <div class="name">{{ stationName }}</div>
          <div class="icon_right"></div>
        </div>
        <div class="remit_container">
          <div class="oilGun_container">
            <div
              class="fuel_remit_top"
              :class="[showRemitPage ? 'active' : '']"
            >
              <!-- 金额 -->
              <div class="amount_of_money">
                <div class="amount_of_money_title">金额</div>
                <van-field
                  :readonly="appType == 3 ? true : false"
                  v-model="priceValue"
                  @click="onFocusField()"
                  @focus="onFocusField()"
                  ref="fieldRef"
                  label="¥"
                  class="field_price"
                  :class="[!priceValue ? 'placeStyle' : '']"
                  placeholder="加油金额(0.01-50000)"
                >
                  <template #button>
                    <div
                      v-show="showKeyboard && !!priceValue"
                      class="icon_close"
                      @click="deletePrice()"
                    ></div>
                    <div
                      class="discountAmt"
                      v-show="CouponData.discountAmt > 0 && showRemitPage"
                    >
                      立减￥{{ verticalPrice }}
                    </div>
                  </template>
                </van-field>
              </div>
              <!-- 推荐价格 -->
              <div
                class="divider_line input"
                :class="[showKeyboard ? 'active' : '']"
                v-if="appType != 3"
              >
                <div class="price_list" v-show="showKeyboard && !priceValue">
                  <div
                    class="price_value"
                    @click="priceChange(item)"
                    v-for="(item, index) in priceList"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <!-- 油枪信息 -->
              <div class="oilGun_info" @click="goOilGunSelect()">
                <div
                  class="oilGun_info_top"
                  v-if="isShow"
                  @click.stop="showOilGunOrUser('user')"
                  style="border-bottom: 1px solid #e5e5e5;margin-bottom: 14px;padding-bottom: 14px;"
                >
                  <div class="oilGun_title">加油员</div>
                  <div
                    class="oilGun_placeholder"
                    style="padding-right: .4rem;color: #333;"
                  >
                    {{ userText }}
                  </div>
                </div>
                <div
                  class="oilGun_info_top"
                  @click.stop="showOilGunOrUser('oilGun')"
                >
                  <div class="oilGun_title">油枪</div>
                  <div
                    class="oilGun_placeholder"
                    v-if="!oilGunNum"
                    style="padding-right: .4rem;color: #333;"
                  >
                    {{ oilGunText }}
                  </div>
                  <div class="oilGun_value" v-else>
                    <span class="num">{{ oilGunNum }}</span>
                    <span class="line">&frasl;</span>
                    <span class="name">{{ oilGunName }}</span>
                  </div>
                  <!-- <template v-if="appType != 3">
                  <div v-show="oilGunStatus && oilGunNum" class="oli_icon_close" @click="changeOilGunValue()"></div>
                </template> -->
                </div>
                <div class="price" v-show="showRemitPage && !!oilOfficialPrice">
                  单价：<span class="price_color"
                    >￥{{ oilOfficialPrice }}/L</span
                  >
                </div>
                <div
                  class="manjian"
                  v-show="
                    CouponData.isShow === 1 &&
                      CouponData.preferenceMessageList.length
                  "
                >
                  <span>限时满减</span>
                  <div>
                    <p
                      v-for="(item, index) in CouponData.preferenceMessageList"
                      :key="index"
                    >
                      <!-- 满0.01元（升） 95#汽油-每升立减40元（%） -->
                      满{{ item.full
                      }}{{ item.activityType === "AAL" ? "元" : ""
                      }}{{ item.activityType === "AALL" ? "升" : "" }}
                      <span>
                        {{ oilGunName }}-每升立减{{ item.cut
                        }}{{ item.activityMode === "FAD" ? "元" : ""
                        }}{{ item.activityMode === "PAR" ? "%" : "" }}
                      </span>
                    </p>
                  </div>
                </div>
              </div>
              <div
                class="divider_line"
                :class="[oilGunStatus ? 'active' : '']"
              ></div>
              <!-- 选择油枪号 -->
              <!-- <div class="oilGun_main_wraper" v-show="oilGunStatus && appType != 3">
              <div class="oilGun_main_content">
                <div class="main_card" :class="[oilGunNum === item.gunName ? 'active' : '']" v-for="item in staOilGunList"
                  :key="item.oilId" @click="changeCard(item)">
                  <div class="gunName">{{ item.gunName }}</div>
                  <span class="line">&frasl;</span>
                  <div class="oilName">
                    {{ item.oil.oilName + item.oil.oilClass }}
                  </div>
                  <div class="active_icon" v-show="showRemitPage">
                    <img src="../../../static/fuel/pay-active-icon.png" />
                  </div>
                </div>
              </div>
            </div> -->
            </div>

            <!-- 支付方式 -->
            <div
              class="remit_page_container"
              v-show="showRemitPage && !showCouponList"
            >
              <div class="remit_page_wraper">
                <!-- 储值卡： 一直会显示 -->
                <div v-if="!multipleOilPayFlag">
                  <div class="stored_radio">
                    <div class="stored_card">
                      <div class="icon stored"></div>
                      <div>
                        <div class="stored_title">储值卡</div>
                        <div class="stored_amt">
                          {{isUsedCard == 1 ? '副卡余额': '卡余额'}}：
                          {{ isUsedCard == 1 ?curOrderData.balance|| 0 : CouponData.balance || 0 }}
                        </div>
                      </div>
                    </div>
                    <van-radio-group v-model="radioParams">
                      <van-radio
                        name="1"
                        value="1"
                        @click="changeStoredVale('1')"
                        :disabled="isDisabled"
                        v-model="radioParams"
                        checked-color="#FD6B00"
                      ></van-radio>
                    </van-radio-group>
                  </div>
                  <hr
                    style="height:0.5px; border:none;background:#eee; margin: 0.2rem 0rem;"
                  />
                  <!-- 通用卡： 开通了通用卡才会显示   genericEnable 是否启用通用卡  0 关闭  1 开启  -->
                  <div
                    class="stored_radio"
                    v-if="CouponData.genericEnable === 1"
                  >
                    <div class="stored_card">
                      <div class="icon stored"></div>
                      <div>
                        <div class="stored_title">通用卡</div>
                        <div class="stored_amt">
                          {{genericIsUsedCard == 1 ? '副卡余额': '卡余额'}}：
                          {{genericIsUsedCard == 1 ?curOrderData.genericBalance|| 0 :  CouponData.genericBalance || 0 }}
                        </div>
                      </div>
                    </div>
                    <van-radio-group v-model="radioParams">
                      <van-radio
                        name="3"
                        value="3"
                        @click="changeStoredVale('3')"
                        :disabled="isDisabled"
                        v-model="radioParams"
                        checked-color="#FD6B00"
                      ></van-radio>
                    </van-radio-group>
                  </div>
                </div>

                <hr
                  v-if="CouponData.genericEnable === 1"
                  style="height:0.5px; border:none;background:#eee;margin: 0.2rem 0rem;"
                />
                <!-- 微信： 一直会显示 -->
                <!-- <div
                  class="divider_line"
                  :class="[oilGunStatus ? 'active' : '']"
                ></div> -->
                <div class="stored_radio">
                  <div class="stored_card">
                    <div class="icon vx"></div>
                    <div class="stored_title">微信</div>
                  </div>
                  <van-radio-group v-model="radioParams">
                    <van-radio
                      name="2"
                      value="2"
                      @click="changeStoredVale('2')"
                      :disabled="isDisabled"
                      v-model="radioParams"
                      checked-color="#FD6B00"
                    ></van-radio>
                  </van-radio-group>
                </div>
              </div>
            </div>

            <!-- 优惠劵列表 -->
            <div v-if="!isDisabled && isShowBtn" class="coupon_modle">
              <div
                class="coupon_info"
                v-show="showRemitPage && !multipleOilPayFlag"
              >
                <img src="../../../static/fuel/pay-yhq.png" />
                <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="clickCoupons((CouponData.couponList || []).length === 0) "/>
              </div>
              <div class="coupon_info" v-show="showRemitPage&&(radioParams==1||radioParams==3)&&isUsedCard != 1 && genericIsUsedCard != 1 ">
                <img src="../../../static/fuel/fanli.png" />
                 <van-cell clickable  :title="`返利金`" @click="onToggle" :value="`返利金总数${CouponData.haveReturnCash||0}，可用${CouponData.useReturnCash||0} ` ">
                  <template #right-icon>
                    <van-checkbox checked-color="#FD6B00" :disabled="(CouponData.haveReturnCash==0||CouponData.useReturnCash==0)" v-model="checked" />
                  </template>
                 </van-cell>
              </div>
            </div>
            <div v-if="!isDisabled && !isShowBtn">
              <div class="coupon_info_2" v-show="showRemitPage && !multipleOilPayFlag">
                <div style="display: flex; align-items: center;">
                  <img src="../../../static/fuel/pay-yhq.png" />
                  <span style="margin-left: 5px;">优惠券</span>
                </div>
                <div
                  @click="goCoupons((CouponData.couponList || []).length === 0)"
                >
                  <span v-html="getCouponText"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 数字键盘 -->
        <van-number-keyboard
          :class="[Number(priceValue) >= 0.01 ? '' : 'disabold']"
          v-model="priceValue"
          :maxlength="9"
          :show="showKeyboard"
          theme="custom"
          close-button-text="确认"
          extra-key="."
          @input="$refs.fieldRef.blur()"
          @close="onCloseKeyboard()"
        />
        <!-- 购物车：现在时没有用到这个购物车的 -->
        <van-popup
          v-model:show="showBottom"
          position="bottom"
          closeable
          :style="{ height: '80%' }"
        >
          <div class="popup_container">
            <div class="title">购物车</div>
            <div class="popup_main">
              <div class="popup_name">油品</div>
              <div class="popup_price">
                <div class="tag">{{ oilGunNum }}号油枪{{ oilGunName }}</div>
                <div class="price">￥{{ newPrice }}</div>
              </div>
              <!-- 优惠劵 -->
              <div v-show="false" class="popup_preferential"></div>
            </div>
          </div>
        </van-popup>
        <!-- 优惠劵弹窗 -->
        <van-popup
          v-model:show="showCouponList"
          :close-on-click-overlay="false"
          round
          position="bottom"
          style="height: 90%; padding-top: 4px"
        >
          <div class="coupons_popup_container" v-if="isShowBtn">
            <div class="title">优惠劵</div>
            <div class="van_popup_main">
              <div
                class="popup_list"
                @click="changeRadioCoupon(index)"
                v-for="(item, index) in coupons"
                :key="item.id"
              >
                <div class="left_popup" :class="getClassNames(item.couponType)">
                  <div class="valueDesc">{{ item.valueDesc }}</div>
                  <div class="condition" v-if="item.couponType == 5">
                    每升立减
                  </div>
                  <div class="condition">{{ item.condition }}</div>
                </div>
                <div class="right_popup">
                  <div class="name" :class="getClassNames(item.couponType)">
                    {{ item.name }}
                  </div>
                  <div class="time">截止：{{ item.time }}</div>
                </div>
                <div class="radio">
                  <input
                    type="radio"
                    name="couponsRadio"
                    :value="index"
                    v-model="radioCouponsValue"
                  />
                </div>
              </div>
              <div style="text-align:center">
                <van-button
                  type="danger"
                  size="normal"
                  round
                  @click="cancelUseCoupon"
                  style="width:4rem"
                  >不使用优惠券</van-button
                >
              </div>
            </div>
          </div>
          <div
            class="coupons_popup_container"
            v-else
            style="height: 100%; overflow-y:hidden ;"
          >
            <div class="title">优惠劵</div>
            <div class="van_popup_main van_popup_main_scroll">
              <van-checkboxGroup v-model="couponUserIdList" @change="checkCouponId">
                <div
                  class="popup_list"
                  v-for="(item, index) in coupons"
                  :key="item.couponUserId"
                >
                  <div
                    class="left_popup"
                    :class="getClassNames(item.couponType)"
                  >
                    <div class="valueDesc">{{ item.valueDesc }}</div>
                    <div class="condition" v-if="item.couponType == 5">
                      每升立减
                    </div>
                    <div class="condition">{{ item.condition }}</div>
                  </div>
                  <div class="right_popup_more">
                    <div class="top">
                      <div
                        class="name"
                        style="width: 2rem;"
                        :class="getClassNames(item.couponType)"
                      >
                        {{ item.name }}{{item.isMergeUse? '-可叠加': ""}}
                      </div>
                      <div class="checkbox">
                        <van-checkbox
                          :name="item.couponUserId"
                          ref="checkboxes"

                        ></van-checkbox>
                      </div>
                    </div>
                    <div class="time">截止：{{ item.time }}</div>
                  </div>
                </div>
              </van-checkboxGroup>
            </div>
            <div class="coupons_btns">
              <van-button
                type="danger"
                size="normal"
                round
                @click="cancelUseCoupon"
                >不使用优惠券</van-button
              >
              <van-button type="info" size="normal" round @click="submitCoupons"
                >确认使用</van-button
              >
            </div>
          </div>
        </van-popup>
      </div>
      <!-- 底部支付 -->
      <div class="bottom_fix_bar" v-show="showRemitPage && !showCouponList">
        <div class="fix_bar_main">
          <div class="car_container">
            <!-- <div class="icon_car" @click="showBottom = !showBottom">
          <van-icon name="cart-o" size=".6rem" badge="1" />
        </div> -->
            <div class="newPrice">
              <div class="price_bar">
                总计：
                <!-- <span class="price_value">￥{{ newPrice }}</span> -->
                <span class="price_value">￥{{ this.CouponData.amt }}元</span>
                <span
                  v-show="CouponData.discountAmt > 0 && showRemitPage"
                  style=" color: #ccc; font-size: 0.2rem; text-decoration: line-through;"
                  >¥{{ this.CouponData.finalAmount }}</span
                >
              </div>
               <p style=" color: #666; font-size: 0.2rem;" v-show="CouponData.haveReturnCash&&checked">说明：{{radioParams==1?'储值卡':radioParams=='3'?'通用卡':''}}支付{{(Number(sumPrice)-Number(CouponData.useReturnCash)).toFixed(2)}}元，返利金抵扣{{Number(CouponData.useReturnCash)}}元</p>
              <!-- <div class="price_coupon" v-show="!!couponPrice || CouponData.discountAmt > 0">优惠
            <span class="coupon_value">
              ￥{{ NewCouponPrice }}
            </span>
          </div> -->
              <div
                class="price_coupon"
                v-show="CouponData.isShowPaymentCommission === 1"
              >
                服务费<span>
                  ￥{{ this.CouponData.channelFeePayer || 0 }} 元</span
                >
              </div>
            </div>
          </div>
          <van-button
            v-throttle="500"
            @click="submitRemit()"
            :loading="btnLoading"
            :disabled="
              (radioParams === '1' && (CouponData.amt > CouponData.balance && CouponData.amt > curOrderData.balance)) ||
                (radioParams === '3' &&
                  (CouponData.amt > CouponData.genericBalance && CouponData.amt > curOrderData.genericBalance))
            "
            type="warning"
            loading-text="支付中..."
            round
            >立即支付</van-button
          >
        </div>
      </div>

      <!-- 选择员工油枪弹窗 -->
      <van-popup
        v-model="oilGunOrUserShow"
        round
        position="bottom"
        :close-on-click-overlay="false"
        :style="{ height: '60%' }"
      >
        <div
          style="height: 100%;display: flex;justify-content: center;align-items: center;"
        >
          <div style="height: 100%;" v-show="swipeIndex === 0">
            <div class="oil-title">
              <span>选择员工</span>
            </div>
            <div class="oil-box">
              <template v-if="userList.length > 0">
                <div
                  class="oil-items"
                  v-for="item in userList"
                  :key="item.userId"
                  @click="changeUserId(item)"
                >
                  <span>{{ item.nickName }}</span>
                </div>
              </template>
              <div
                v-else
                style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 24px;color: #ccc;"
              >
                该油站下暂无员工
              </div>
            </div>
          </div>
          <div
            style="height: 100%;position: relative;"
            v-show="swipeIndex === 1"
          >
            <van-icon
              v-show="!isHasUserId && isNeedStaff"
              @click="clickBack"
              name="revoke"
              size="20"
              style="position: absolute;top: 25px;left: 10px;"
            />
            <div class="oil-title">
              <span>选择油枪</span>
            </div>
            <div class="oil-box">
              <template v-if="oilGunList.length > 0">
                <div
                  class="oil-items"
                  v-for="item in oilGunList"
                  :key="item.id"
                  @click="changeOilGunId(item)"
                >
                  <div class="gunName">{{ item.gunName }}</div>
                  <span class="line">&frasl;</span>
                  <div class="oilName">
                    {{ item.oil.oilName + item.oil.oilClass }}
                  </div>
                </div>
              </template>
              <div
                v-else
                style="position: absolute;top: 50%;left: 30%;transform: translate(-20%,-50%);font-size: 24px;color: #ccc;"
              >
                该员工未绑定油枪
              </div>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
    <div v-else class="loadingName">
      <p>正在加载中,请耐心等待</p>
    </div>
    <van-overlay :show="updateOrderByCouponLoading">
      <van-loading style="text-align:center;top: 50%;" size="40px" vertical
        >加载中...</van-loading
      >
    </van-overlay>

    <!-- 储值卡支付，需要密码时的密码框 -->
    <van-popup
      v-model="isShowPasswdKeyboard"
      position="bottom"
      :style="{ height: '75%' }"
    >
      <h3 style="text-align:center">输入支付密码</h3>
      <!-- 密码输入框 -->
      <van-password-input
        :value="password"
        :focused="isShowPasswdKeyboard"
        @focus="isShowPasswdKeyboard = true"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
        v-model="password"
        theme="custom"
        close-button-text="完成"
        :show="isShowPasswdKeyboard"
        @blur="isShowPasswdKeyboard = false"
        @close="checkPassword"
      />
    </van-popup>

    <!-- 电子卡同一个油站，同一个手机在一分钟内支付订单的提示 -->
    <van-dialog
      v-model="isRepeatPayshow"
      message="你已在当前商户支付过一笔相同金额的订单，请确认是否继续支付"
      cancel-button-text="取消支付"
      confirm-button-text="继续支付"
      show-cancel-button
      @confirm="continuePay"
    >
    </van-dialog>

    <!-- 油机订单选择： 选择油枪后，去查询油机订单，如果仅30分钟内有，则展示 -->
    <van-popup
      v-model="isShowOilEnginDialog"
      :close-on-click-overlay="false"
      position="bottom"
      closeable
      close-icon-position="top-left"
      @click-close-icon="closeOilEngin"
      :style="{ height: '70%' }"
    >
      <!-- 空状态 -->
      <div class="order_engin_list" v-if="oilEnginOrderList.length === 0">
        <h3>选择订单</h3>
        <div class="empty">
          <p class="header">
            <b>{{ this.oilGunNum }}号枪</b>
            近10分钟有0笔待支付订单
          </p>
          <div class="bottom" v-if="isInput">
            <span>没有您的订单？可尝试手工输入</span>
            <van-button
              color="orangered"
              round
              size="normal"
              style="width: 2rem;font-size: 0.3rem;height: 0.8rem;"
              @click="handleManualInput"
              >手动输入</van-button
            >
          </div>
        </div>
      </div>
      <!-- 存在订单 -->
      <div class="order_engin_list" v-if="oilEnginOrderList.length > 0">
        <h3>选择订单</h3>
        <div
          class="order_engin_item"
          v-for="(item, index) in oilEnginOrderList"
          :key="item.id"
          @click="selectOilEnginItem(item)"
        >
          <p class="p1">
            <span class="gunNumber"> {{ item.oilGun }}</span>
            <span class="gunName">{{ item.oilName }}</span>
          </p>
          <p class="p2">
            <span class="price">
              <b>{{ item.totalPrice }}</b> 元
            </span>
            <span class="time">{{ item.createTime }}</span>
          </p>
        </div>
      </div>
    </van-popup>
  </van-pull-refresh>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import { getAuthen } from "@/utils/getAuthen";
import wx from "weixin-js-sdk";
import Qr from "@/components/QrCode";
import Vue from "vue";
import throttle from "@/utils/directive";
import qs from "qs"; // 用于解析url获取参数的第三方库
import {
  NumberKeyboard,
  Field,
  Icon,
  Popup,
  Toast,
  Button,
  CouponCell,
  Radio,
  RadioGroup,
  Swipe,
  SwipeItem,
  PullRefresh,
  Loading,
  Overlay,
  Dialog,
  PasswordInput,Checkbox, CheckboxGroup
} from "vant";
Vue.use(NumberKeyboard);
Vue.use(Field);
Vue.use(Icon);
Vue.use(Popup);
Vue.use(Toast);
Vue.use(Button);
Vue.use(CouponCell);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(PullRefresh);
Vue.use(Loading);
Vue.use(Overlay);
Vue.use(Dialog);
Vue.use(PasswordInput);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);

export default {
  head() {
    return {
      title: "一键加油"
    };
  },
  data() {
    return {
      radioParams: "2", // 1 储值卡  2 微信支付  3 通用卡支付
      radioCouponsValue: "-1", // 优惠券按钮绑定的值（当前保存是索引值）
      couponUserIdList: [], // 优惠券可叠加按钮绑定的值
      showKeyboard: false, // 键盘显示
      showBottom: false, // 购物车
      showRemitPage: false, // 支付界面
      showCouponList: false, // 优惠劵
      staOilGunList: [],
      oilGunNum: "", // 油枪号
      oilGunName: "", // 油枪名字结合
      oilName: "", // 油枪名字
      oilClass: "", // 油枪类型
      oilId: "", // 油ID
      oilGunStatus: true, // 油枪状态
      priceValue: "", // 价格
      oilOfficialPrice: "", // 单价
      priceList: [100, 200, 300, 400],
      CouponData: {}, // 优惠劵信息
      chosenCoupon: -1, // 优惠劵索引
      couponPrice: "", // 优惠金额
      verticalPrice: "", // 立减
      couponNo: "", // 优惠劵编号
      couponUserId: "", // 优惠卷id
      axiosNum: 0,
      oilGunText: "请选择油枪号",
      userText: "请选择加油员",
      oilGunOrUserShow: false,
      userList: [],
      oilGunList: [],
      swipeIndex: 0,
      isHasUserId: false,
      isNeedStaff: true,
      utmSource: 9, // 订单来源 1 扫员工码
      isLoading: false,
      updateOrderByCouponLoading: false, // 修改订单loading
      nonsecretInfo: {}, // 免密支付信息
      passwordShowKeyboard: false, // 密码弹框
      password: "",
      isShowPasswdKeyboard: false, // 控制是否显示密码输入框
      isRepeatPayshow: false, // 控制电子卡重复支付弹框
      isShowOilEnginDialog: false, // 控制是否展示油机订单弹框
      oilEnginOrderList: [], // 油机订单列表
      isTube: false, // 是否开始零托管
      isInput: false, //是否手动控制输入金额
      currentOilEngineInfo: {}, // 当前选择的油机订单信息
      btnLoading: false,
      multipleOilPayFlag: false, //开启多油品是否展示优惠券和电子卡
      gunNameS: "", //通过油枪名获取是否开启多油品展示优惠券和电子卡
      isShowPage: true,
      isDisabled: false,
      curList: [], //优惠券多选时选中单张临时存储
      tempFlag: false,//临时判断是否存的单张
      isUsedCard:'',//储值卡
      genericIsUsedCard: '',//   通用卡
      curOrderData: {},
      curOrdNo:"", //用于重复支付时，临时存储新订单号
      checked:false,
      sumPrice:null,//定义存储价格说明
    };
  },
  components: {
    Qr: Qr
  },
  watch: {
    coupons: {
      handler(list) {
        console.log(list, "监听--优惠券列表");
      },
      immediate: true
    }
  },
  computed: {
    getCouponText() {
      if (this.couponUserIdList.length === 0) {
        return (this.CouponData.couponList || []).length === 0
          ? '<span style="font-weight:normal; color: #ccc;">暂无可用优惠券 &gt;</span>'
          : `${this.CouponData.couponList.length}张可用 &gt;`
      } else {
        return `-￥${ this.couponPrice } &gt;`;
      }
    },
     // 判断是否展示 优惠券确认使用按钮
     isShowBtn() {
       const isShow = this.coupons.every(ele => {
         return ele.isMergeUse == 0
        })
        return isShow
      },
    // 优惠券列表数组
    coupons() {
      console.log("计算优惠券数据---coupons", this.CouponData);
      const { couponList = [] } = this.CouponData;
      const couponTypeMap = [
        { type: "1", text: "现金券" },
        { type: "2", text: "折扣券" },
        { type: "3", text: "兑换劵" },
        { type: "4", text: "洗车券" },
        { type: "5", text: "立减券" },
        { type: "100", text: "优惠券" }
      ];

      return couponList.map(item => {
        // couponType：1 现金券  2 折扣券
        // couponAmt 优惠金额
        // newAmtByCoupon: 优惠后的金额
        // issueName:发放方式名称
        // 如果 couponType 为2（折扣卷）时 ，couponAmt 为折扣百分比
        // couponThresholdAmt  最低消费金额
        const couponAmt = ["1", "5"].includes(item.couponType)
          ? `￥ ${item.couponAmt} `
          : `${item.couponAmt} %`;
        // const value =
        //   item.couponType === "1"
        //     ? `${item.couponAmt * 100}`
        //     : `${(Number(this.priceValue) / item.couponAmt) * 100}`;
        const value = Number(this.CouponData.discountCouponAmt) * 100;
        let couponText = "";

        // 根据couponType在映射数组中查找对应的文本
        const matchedCoupon = couponTypeMap.find(
          ele => ele.type == item.couponType
        );
        if (matchedCoupon) {
          couponText = matchedCoupon.text;
        }
        return {
          ...item,
          id: item.couponId,
          condition: `满${item.couponThresholdAmt}元可用`,
          name: couponText, // 优惠券名称
          time: item.couponEffectiveTime,
          valueDesc: couponAmt, // 折扣券优惠金额文案
          couponUserId: item.couponUserId,
          value: Number(value) //  折扣券优惠金额，单位分
        };
      });
    },
    newPrice() {
      if (!!this.couponPrice) {
        return (
          Number(this.priceValue) -
          this.couponPrice -
          this.verticalPrice
        ).toFixed(2);
      }
      return Number(this.priceValue - this.verticalPrice).toFixed(2);
    },
    // 优惠总价格
    NewCouponPrice() {
      if (!!this.couponPrice) {
        return (Number(this.couponPrice) + this.verticalPrice).toFixed(2);
      }
      return (this.verticalPrice || 0).toFixed(2);
    },
    isShow() {
      if (this.isHasUserId) {
        return true;
      } else {
        return this.isNeedStaff;
      }
    },
    ...mapGetters({
      userInfo: "authen/userInfo"
    })
  },
  async created() {
    // console.log(this.phone);
    // if (!this.phone) {
    //   getAuthen("", "remit");
    //   return false;
    // }
    console.log("进入remit页面-userInfo：", this.userInfo);
    console.log("store中的存储的用户信息", this.$store.state.authen.userInfo);
    if (!this.userInfo.mobilePhone) {
      console.log("000--扫码进入--授权");
      getAuthen("", "remit");
      return false;
    }

    let currentUrl = window.location.href;
    // let urlObj = this.getUrlParams(currentUrl);
    // this.getUrlData(currentUrl); //  测试使用原生js的方法获取
    // let urlObj = this.getUrlParamsByQs(currentUrl);
    let urlObj;
    try {
      urlObj = this.getUrlParams(currentUrl);
      if (urlObj === null || urlObj === {}) {
        urlObj = this.getUrlParamsByQs(currentUrl);
      }
    } catch (error) {
      urlObj = this.getUrlParamsByQs(currentUrl);
    }

    console.log("解析url:", urlObj);

    if (urlObj.utmSource) this.utmSource = urlObj.utmSource;
    this.stationId = urlObj.stationId;
    this.userId = urlObj.userId;
    this.stationName = urlObj.stationName;
    this.appType = urlObj.appType; // 来源类型3:pos机
    this.gunNameS = urlObj.gunName;
    console.log("gunNameS", this.gunNameS);
    await this.getSelectStationInfo(this.userId);
    if (this.appType == 3) {
      this.userText = urlObj.userName; // pos员工名
      this.oilGunName = urlObj.oilName; // 油枪名
      this.oilGunNum = urlObj.gunName; // pos油枪
      this.priceValue = urlObj.price / 100; // 初始金额
      this.showKeyboard = false;
      this.showRemitPage = true;
      this.showCouponList = false;

      this.orderRandomId = urlObj.orderRandomId;
      this.oilGunOrUserShow = false;
      this.isHasUserId = true;
      await this.getPayPosInfo();
      this.radioParamsVal()
    } else {
      this.getOilGunUserList(this.userId);
    }
    this.inspectRegisteredUser();
  },
  methods: {
    radioParamsVal() {
      if (this.CouponData && this.CouponData.balance || this.curOrderData && this.curOrderData.balance) {
        //默认支付方式--储值卡支付： 储值卡有余额
        this.radioParams = "1";
      } else if (
        this.CouponData &&
        this.CouponData.genericEnable === 1 &&
        this.CouponData.genericBalance
        || this.curOrderData && this.curOrderData.genericBalance
      ) {
        //默认支付方式--通用卡支付： 储值卡没有余额，但开通了通用卡且通用卡有余额
        this.radioParams = "3";
      } else {
        //默认支付方式---微信支付： 储值卡没有余额 ， 且没有开通通用卡，或则开通通用卡然后通用卡里面也没有余额
        this.radioParams = "2";
      }
    },
        // 计算接口需要的而优惠券拼接参数
        getCouponUseIdList(){
      // 此处拼接 优惠券单选和多选
      let couponUserIdList = JSON.parse(JSON.stringify(this.couponUserIdList))
       if(this.curList.couponUserId == this.couponUserId) {
            couponUserIdList.push(this.couponUserId)
          }else if(this.isShowBtn) {
            // 全为单选券的情况
            couponUserIdList = [this.couponUserId]
          }
          couponUserIdList =  Array.from(new Set(couponUserIdList)).join(',')
          return couponUserIdList
    },
     // 判断如果是不可叠加的优惠券直接弹出
     checkCouponId(e) {
      console.log(e,'选择的优惠券id');
      if(JSON.stringify(e) != JSON.stringify(this.curList)) {
        // 避免死循环
        if(this.couponUserIdList && this.couponUserIdList.length > 0){
        for (let i = 0; i < this.couponUserIdList.length; i++) {
          const ele = this.couponUserIdList[i];
          const isCheckout = this.coupons.find(item => ele == item.couponUserId && item.isMergeUse === 0);
          console.log(isCheckout,'单张优惠券的值');
          if(this.tempFlag) {
            this.couponUserIdList = [e[e.length-1]]
            this.tempFlag = false
          }else if (isCheckout !== undefined) {
              this.couponUserIdList = [isCheckout.couponUserId];
              this.curList = [isCheckout.couponUserId]
              this.tempFlag = true
              return;
          }
      }
    }
  }
    },
      onToggle(){
      if(this.CouponData.haveReturnCash==0||this.CouponData.useReturnCash==0) return
      if(this.radioParams==1||this.radioParams==3){
        if(this.checked){
          this.checked=false
        }else{
          if(this.CouponData.haveReturnCash){
            this.checked=true
          }else{
            this.checked=false
          }

        }
      }
    },
    // 匹配优惠券样式
      getClassNames(couponType) {
        return {
          direct: couponType == 1,
          rate: couponType == 2,
          exchange: couponType == 3,
          carwash: couponType == 4,
          reduction: couponType == 5,
          tongyong: couponType == 100
        };
      },
    // 控制手动输入金额 点击返回油枪选择
    closeOilEngin() {
      this.isShowOilEnginDialog = false;
      this.oilGunOrUserShow = true;
    },
    // 判断是否多油品和C扫B是柴油的话是否展示或者是否组合支付
    async getSelectStationInfo(userId){
      const res=await this.$axios.$get("/selectStationInfo",{params:{stationId:this.stationId,gunName:this.gunNameS}})
        if(res&&res.retCode==0){
          const combinedPaymentFlag=res&&res.data&&res.data.combinedPaymentFlag||null
          sessionStorage.setItem('combinedPaymentFlag',combinedPaymentFlag)
          if(res&&res.data&&res.data.oilGun&&res.data.oilGun.oilClass=='柴油'){
            this.multipleOilPayFlag=true
          }
          if((res&&res.data&&res.data.multipleOilPayFlag==1)&&this.appType!=3){
            if(userId){
              this.$router.replace({path:`/${this.enterpriseId}/fuel/remitDieselOil`,query:{stationId:this.stationId,appType:this.appType,stationName:this.stationName,userId}})
            }else{
               this.$router.replace({path:`/${this.enterpriseId}/fuel/remitDieselOil`,query:{stationId:this.stationId,appType:this.appType,stationName:this.stationName}})
            }
          }
          if((res&&res.data&&res.data.combinedPaymentFlag==1)&&this.appType!=3){
            this.$router.replace({path: `/${this.enterpriseId}/fuel/combinedPayment`,query: { stationId: this.stationId, stationName: this.stationName,userId }});
          }
        } else {
        this.$toast.fail(res && res.message);
      }
    },
    // 初始化进入判断是否注册成功发券
    inspectRegisteredUser() {
      this.$axios
        .$get("/inspectRegisteredUser", {
          params: { enterpriseId: this.enterpriseId, mobilePhone: this.phone }
        })
        .then(async res => {
          // 如果完全新用户时：基础值是1 ， 领完后再次进入页面, 新用户是最终停留在2。 根据后端接口查看，只调用了一次
          console.log("进入页面的次数", res.data.numberOfEntry);
          if (res.retCode === 0 && res.data.numberOfEntry === 2) {
            // 获取当前用户下所有的优惠券
            const couponRes = await this.$axios.$get("/getRegisterCoupon", {
              params: {
                enterpriseId: this.enterpriseId,
                mobilePhone: this.phone
              }
            });
            console.log("couponRes----", couponRes);
            if (couponRes.data && couponRes.data.length >= 1) {
              Dialog.confirm({
                title: "恭喜获得优惠券！",
                message: "优惠券已到账，马上去查看",
                confirmButtonText: "去查看",
                confirmButtonColor: "gray",
                cancelButtonText: "继续支付",
                cancelButtonColor: "red"
              }).then(() => {
                this.$router.push({
                  path: `/${this.enterpriseId}/coupon`
                });
              });
            }
          }
        });
    },

    // 下拉刷新事件
    onRefresh() {
      console.log("下拉刷新");
      // 1、（openid没有）用户未授权 2001
      // 2、（手机号码没有）用户未开电子卡2002
      // 3、（油企id 没有）油企信息没有配置 3001
      if (!this.openId) {
        this.$toast("2001,没有openId");
        this.isLoading = false;
        return;
      }

      if (!this.phone) {
        // Toast("2002");
        this.$toast("2002,没有手机号");
        this.isLoading = false;
        return;
      }
      if (!this.enterpriseId) {
        // Toast("3001");
        this.$toast("3001,没有enterpriseId");
        this.isLoading = false;
        return;
      }

      this.$axios
        .$get("/selectMemberInfo", {
          params: {
            enterpriseId: this.enterpriseId,
            mobilePhone: this.phone
          }
        })
        .then(res => {
          // this.$toast("页面已刷新");
          if (res.retCode !== 0) {
            throw new Error(res.message);
          }
          if (!res.data) {
            localStorage.clear(); // 清空缓存
            throw new Error("1007,查询不到该用户信息，请重新进入");
          }
          this.$store.commit("authen/setUserInfo", res.data);
          this.isLoading = false;
          this.getOilGunUserList(this.userId);
          console.log("用户信息", res.data);
        })
        .catch(err => {
          // Toast(err + "失败");
          this.$toast(err + "失败");
          this.isLoading = false;
        });
    },

    getUrlParamsByQs(url) {
      let urlStr = url.split("?")[1];
      let urlObj = qs.parse(urlStr);
      return urlObj;
    },
    // 原生js获取url上的参数
    // getUrlData(url) {
    //   //demo: https://yftx-map-test.xailife.com/174/fuel/remit/?stationId=234&stationName=广东壳牌中山服务区加油站&userId=589&utmSource=1
    //   console.log("原始url：", url);
    //   console.log("解码后的url", decodeURI(url));

    //   let fullUrl = decodeURI(url);
    //   let urlParamStr = fullUrl.split("?")[1]; // 获取链接 ？ 后的参数
    //   let urlParamArr = urlParamStr.split("&");
    //   let urlObj = {};
    //   urlParamArr.forEach(item => {
    //     let itemObj = item.split("=");
    //     urlObj[itemObj[0]] = itemObj[1];
    //   });
    //   console.log("原生---", urlObj);
    //   return urlObj;
    // },

    // 截取url参数  ： URLSearchParams 会有兼容性问题，低版本不兼容
    getUrlParams(url) {
      // Object.fromEntries:静态方法将键值对列表转换为一个对象
      // urlSearchParams.entries()方法: 返回一个迭代器，允许遍历该对象中包含的所有键/值对
      let urlStr = url.split("?")[1];
      const urlSearchParams = new URLSearchParams(urlStr);
      const result = Object.fromEntries(urlSearchParams.entries());
      console.log("URLSearchParams---", result);

      return result;
    },

    // 方法2： 使用原生js解析url
    getUrlData(url) {
      //  demo : https://yftx-map-test.xailife.com/174/fuel/remit/?stationId=234&stationName=广东壳牌中山服务区加油站&userId=589&utmSource=1
      // decodeURI : 以UTF-8编码编码字符串，对这些字符：“ ; , / ? : @ & = + $ ”不做编码。
      console.log("原始url：", url);
      console.log("解码后的urldecodeURIComponent", decodeURIComponent(url));

      let fullUrl = decodeURIComponent(url); // 解码
      let urlStr = fullUrl.split("?")[1]; // 获取链接 ？ 后的参数
      let urlParamArr = urlStr.split("&"); // 分割键值对   如果url的参数中存在了 &  会切割不准确的
      let urlObj = {};
      urlParamArr.forEach(item => {
        let key = item.slice(0, item.indexOf("="));
        let val = item.slice(item.indexOf("=") + 1);
        urlObj[key] = val;
        // let itemObj = item.split("=");
        // urlObj[itemObj[0]] = itemObj[1]; // 拼接对象
      });
      return urlObj;
    },

    // 点击油枪
    showOilGunOrUser(key) {
      this.currentOilEngineInfo = {}; // 每次点击油枪后， 清空一下油机订单的信息
      if (this.appType != 3) {
        this.priceValue = ""; // 清空输入框金额
      }
      this.CouponData.preferenceMessageList = []; // 清空一下显示满减提示
      if (this.appType != 3) {
        if (key === "user") {
          console.log(key);
          if (this.isHasUserId) {
            this.oilGunStatus = false;
            this.showRemitPage = false;
            // Toast("通过员工码扫码进入");
            this.$toast("通过员工码扫码进入");
            return;
          }
          this.swipeIndex = 0;
          this.oilGunOrUserShow = true;
        } else if (key === "oilGun") {
          console.log(key);
          this.swipeIndex = 1;
          this.oilGunOrUserShow = true;
        }
      }
    },
    // 获取油枪用户列表
    getOilGunUserList(userId) {
      let data = {
        stationId: this.stationId
      };
      if (userId) data.userId = userId;
      this.$axios
        .$get("/staff/list", {
          params: data
        })
        .then(res => {
          console.log(res);
          if (res.retCode === 0 && res.data) {
            this.isHasUserId = res.data.hasUserId;
            this.isNeedStaff = res.data.needStaff;
            this.oilGunOrUserShow = true;
            this.isTube = res.data.isTube === "0" ? false : true; // 是否开启零托管  0关闭 1 开启
            this.isInput = res.data.isInput == "1" ? true : false; // 是否手动控制输入金额  0关闭 1 开启
            console.log("开启的关联领管：", this.isTube);
            // 扫码进来
            if (this.isHasUserId) {
              this.userText = res.data.staff.nickName;
              this.oilGunList = res.data.staff.gunList;
              this.userId = res.data.staff.userId;
              this.userList = [];
              this.swipeIndex = 1;
              // 主页进来
            } else {
              if (this.isNeedStaff) {
                this.swipeIndex = 0;
                this.userList = res.data.staffList;
                this.oilGunList = [];
              } else {
                this.oilGunList = res.data.gunList;
                this.swipeIndex = 1;
              }
            }
          } else {
            // Toast("请求失败！！！");
            this.$toast("请求员工油枪数据失败！！！");
          }
        });
    },

    // 点击选择员工
    changeUserId(item) {
      console.log(item);
      this.oilGunList = item.gunList;
      this.userId = item.userId;
      this.userText = item.nickName;
      // if (this.oilGunText === '请选择油枪号') {
      //   this.swipeIndex = 1
      // } else {
      //   this.oilGunStatus = false;
      //   this.$refs.fieldRef.focus();
      //   this.showRemitPage = false;
      //   this.oilGunOrUserShow = false
      // }
      this.swipeIndex = 1;
      this.oilGunNum = "";
      this.oilGunName = "";
      this.oilGunText = "请选择油枪号";
    },
    // 点击选择油枪
    changeOilGunId(item) {
      console.log(item);
      this.oilGunText = item.oil.oilName + item.oil.oilClass;
      this.oilGunNum = item.gunName;
      this.oilGunName = item.oil.oilName + item.oil.oilClass;
      this.oilName = item.oil.oilName;
      this.oilClass = item.oil.oilClass;
      this.oilId = item.oilId;
      this.oilOfficialPrice = item.oilStationPrice;
      this.oilGunStatus = false;
      this.$refs.fieldRef.focus(); // 输入框聚焦
      this.showRemitPage = false;
      this.oilGunOrUserShow = false;
      console.log(this.showKeyboard);
      if (this.isTube) {
        // 开启了零托管再去查询油机订单
        this.getOilEnginOrderList(); // 查询油机订单
      }
      // 切换支付渠道
      this.changeAutoPayWay();
    },

    // 点击选择员工和油枪中的返回按钮
    clickBack() {
      this.swipeIndex = 0;
    },

    init() {
      // 获取油站信息列表
      this.$axios
        .$get("/selectStaOilGunList", {
          params: {
            stationId: this.stationId,
            userId: this.userId
          }
        })
        .then(res => {
          if (res.retCode != 0) {
            alert(res.message);
            throw new Error(res.message);
            return false;
          }
          this.staOilGunList = res.data.staOilGunList || [];
        });
      // .catch((err) => {
      //   // alert(err);
      //   if (this.axiosNum === 3) {
      //     alert('网络波动请重新扫码进入')
      //     return false
      //   }
      //   if (this.axiosNum < 3) {
      //     this.axiosNum++
      //     this.init()
      //   }
      // });
    },

    // 改变油站卡片
    changeCard(item) {
      this.oilGunNum = item.gunName;
      this.oilGunName = item.oil.oilName + item.oil.oilClass;
      this.oilName = item.oil.oilName;
      this.oilClass = item.oil.oilClass;
      this.oilId = item.oilId;
      this.oilOfficialPrice = item.oilStationPrice;
      this.oilGunStatus = false;
      this.$refs.fieldRef.focus();
      this.showRemitPage = false;
    },

    // 删除金额
    deletePrice() {
      if (this.appType != 3) {
        this.priceValue = "";
      }
    },

    // 删除油枪
    changeOilGunValue() {
      if (this.appType != 3) {
        this.oilGunNum = "";
        this.oilGunName = "";
        this.oilName = "";
        this.oilClass = "";
        this.oilId = "";
        this.oilOfficialPrice = "";
      }
    },

    // 点击价格列表
    async priceChange(item) {
      console.log(this.CouponData, "55555");
      this.priceValue = item;
      this.$refs.fieldRef.blur();
      this.showKeyboard = false;
      this.showRemitPage = true;
      await this.getPayInfo();
      this.radioParamsVal()
    },

    // 点击优惠券
    clickCoupons(status) {
      if (status) {
        return;
      }
      this.showCouponList = true;
    },
    goCoupons(status) {
      if (status) {
        return;
      }
      this.showCouponList = true;
    },
    // 点击优惠劵
    changeRadioCoupon(index) {
      this.chosenCoupon = index; // 当前优惠券的索引index
      this.showCouponList = false;
      this.radioCouponsValue = index;
      this.couponPrice = (this.coupons[index].value / 100).toFixed(2); // 计算优惠券的价格
      this.couponNo = this.coupons[index].couponNo;
      this.couponUserId = this.coupons[index].couponUserId;
      console.log(this.coupons[index]);
      this.updateOrderByCoupon();
    },

    // 调取优惠劵订单 flag只用于判断优惠券抛错
    async updateOrderByCoupon(flag) {
      this.verticalPrice = "";
      const {
        oilGunNum,
        phone,
        openId,
        stationId,
        newPrice,
        oilId,
        couponNo,
        couponUserId,
      } = this;
      const { ordNo } = this.CouponData;
      let cardFlag = "2";
      let genericPay = this.radioParams === "3" ? true : false; // 储值卡支付和微信支付是false，  通用卡支付是true
      if (this.radioParams == "1") {
        cardFlag = "2";
      } else if (this.radioParams == "2") {
        cardFlag = "1";
      }
       // 此处拼接 优惠券单选和多选
      //  判断是用于清除最开始的最大优惠券
      let couponUserIdList = this.getCouponUseIdList()
      let couponNoList=null
      if(couponUserIdList.length){
        let arr = couponUserIdList.split(",").map(ele => {
            return this.coupons.find(item => item.couponUserId == ele);
          }).filter(ele => ele != undefined)
         couponNoList = arr.map(ele => ele.couponNo).join(",")
      }
      this.updateOrderByCouponLoading = true;
      await this.$axios
        .$post("/updateOrderByCoupon", {
          aliUserId: "1",
          appType: "1",
          cardFlag,
          gunName: oilGunNum,
          mobilePhone: phone,
          oilId,
          openId: openId,
          couponNo: couponNoList,
          orderNo: ordNo,
          payType: "wx",
          receivableAmt: newPrice,
          stationId,
          version: "1.0",
          couponUserId:couponUserIdList,
          genericPay
        })
        .then(res => {
          if (res.retCode == 0) {
            this.CouponData = res.data || {};
            this.ordNo = res.data.ordNo;
            this.verticalPrice = res.data.discountAmt || 0;
            this.couponPrice = Number(res.data.discountCouponAmt).toFixed(2)
            this.showCouponList = false; // 关闭弹框
            this.sumPrice=res.data.amt
          } else if (res.retCode == -1) {
            if(!flag){
              this.chosenCoupon = -1;
              this.couponPrice = "";
              this.couponNo = "";
              this.couponUserId = "";
              this.showCouponList = false; // 关闭弹框
              this.radioCouponsValue = "-1"; // 取消优惠券的选中状态
              this.priceValue = "";
              this.onFocusField();
            }
            this.$toast({
              message: res.message,
              forbidClick: true,
              duration: 2000
            });
            // throw new Error(res.message);
          } else {
            this.radioParams = "2";
            throw new Error("储值卡无法交易");
          }
        })
        .catch(error => {
          this.$toast("" + error);
          console.log(error);
        });
      this.updateOrderByCouponLoading = false;
    },
    // 使用多张优惠券
    submitCoupons() {
      console.log(this.couponUserIdList, "使用多张优惠券");
      this.updateOrderByCoupon('submitCoupons');
      // this.showCouponList = false;
    },
    // 取消使用优惠券
    cancelUseCoupon() {
      this.couponUserIdList = []
      // 取消选中的优惠券，然后重新更新订单信息
      console.log("取消使用优惠券");
      this.chosenCoupon = -1;
      this.couponPrice = "";
      this.couponNo = "";
      this.couponUserId = "";
      this.showCouponList = false; // 关闭弹框
      this.radioCouponsValue = "-1"; // 取消优惠券的选中状态
      this.updateOrderByCoupon();
    },

    // 点击储值卡
    changeStoredVale(val) {
      if((val==1&&this.isUsedCard == 1) || (val==3&&this.genericIsUsedCard == 1)){
        this.CouponData.couponList = []
      }
      this.radioParams = val;
      this.updateOrderByCoupon();
    },

    // 回到选择油枪的页面
    goOilGunSelect() {
      if (this.appType != 3) {
        this.oilGunStatus = true;
        this.showKeyboard = false;
        // this.showRemitPage = false;
      }
    },

    // 返回上一页
    goFuelPage() {
      if (!this.userId) {
        this.$router.replace({ path: `/${this.enterpriseId}/fuel` });
        this.$router.go(-1);
      }
    },
    // 小数点的判断
    isDecimal(num) {
      let data = {};
      data.x = String(num).indexOf(".") + 1;
      data.y = String(num).length - data.x;
      return data;
    },
    // 确认金额
    async onCloseKeyboard() {
      let decimal = this.isDecimal(this.priceValue);
      if (Number(this.priceValue) < 0.01) {
        return;
      } else if (decimal.y > 2 && decimal.x != 0) {
        // Toast("最多两位小数");
        this.$toast("最多两位小数");
        return;
      }
      await this.getPayInfo();
      this.$refs.fieldRef.blur();
      this.showKeyboard = false;
      this.showRemitPage = true;
      this.radioParamsVal()
    },

    // pos ： 扫pos机的支付二维码
    getPayPosInfo() {
      console.log("扫pos机的二维码----支付");
      // let ua = window.navigator.userAgent.toLowerCase();
      // //判断是不是微信
      // if (ua.match(/MicroMessenger/i) == "micromessenger") {
      //   // 微信
      //   console.log('微信');
      // }
      // //判断是不是支付宝
      // if (ua.match(/AlipayClient/i) == "alipayclient") {
      //   //支付宝
      //   console.log('支付宝');
      // }
      this.verticalPrice = "";
      this.couponPrice = "";
      this.chosenCoupon = -1;
      this.couponUserId = "";
      this.couponNo = "";
      const { oilGunNum, phone, openId, stationId, newPrice } = this;
      return this.$axios
        .$post("/createOrder", {
          aliUserId: "1",
          appType: this.appType,
          cardFlag: "1",
          gunName: this.oilGunNum,
          mobilePhone: phone,
          newCreatefalg: "1",
          openId: openId,
          orderOriginType: "2",
          payType: "wx",
          receivableAmt: this.priceValue,
          stationId,
          version: "1.0",
          userId: this.userId,
          orderRandomId: this.orderRandomId
        })
        .then(res => {
          if (res.retCode == 0) {
            this.CouponData = res.data || {};
            this.verticalPrice = res.data.discountAmt || 0;
            this.sumPrice=res.data.amt
            // 判断当前输入金额是否存在优惠度最大的优惠券，有则默认选择它
            if (res.data.discountMaxCoupon) {
              const tempObj = res.data.discountMaxCoupon;
              const tempList = res.data.couponList;
              let index = tempList.findIndex(
                item => item.couponId === tempObj.couponId
              );
              const maxCouponInfo = tempList.find(
                item => item.couponId === tempObj.couponId
              );
              console.log("最大力度优惠券的索引", index);
              console.log("最大力度优惠券的信息", maxCouponInfo);
              // 更新选中的优惠券的信息
              this.chosenCoupon = index;
              this.radioCouponsValue = index;
              this.couponPrice = (maxCouponInfo.value / 100).toFixed(2); // 计算优惠券的价格
              this.couponNo = maxCouponInfo.couponNo;
              this.couponUserId = maxCouponInfo.couponUserId;
            }
          }
        })
        .catch(function(error) {
          // Toast({
          //   message: "确认订单信息失败，请重试"
          // });
          this.$toast("确认订单信息失败，请重试");
          console.log(error);
        });
    },

    // 获取订单信息
    getPayInfo() {
      console.log("微信内调起支付---getPayInfo");
      this.verticalPrice = "";
      this.couponPrice = "";
      this.chosenCoupon = -1; // 当前选中优惠券的索引
      this.radioCouponsValue = "-1";
      this.couponUserId = "";
      this.couponNo = "";
      const { oilGunNum, phone, openId, stationId, newPrice } = this;
      const data = {
        aliUserId: "1",
          appType: "1",
          cardFlag: "1",
          gunName: oilGunNum,
          mobilePhone: phone,
          newCreatefalg: "1",
          openId: openId,
          orderOriginType: "4",
          payType: "wx",
          receivableAmt: newPrice,
          stationId,
          version: "1.0",
          userId: this.userId,
          utmSource: this.utmSource
      }
      return this.$axios
        .$post("/createOrder", {...data})
        .then(res => {
          if (res.retCode == 0) {
            this.CouponData = res.data || {};
            this.verticalPrice = res.data.discountAmt || 0;
            this.sumPrice=res.data.amt
            console.log("创建订单--", this.CouponData);

            // 判断当前输入金额是否存在优惠度最大的优惠券，有则默认选择它
            if (res.data.discountMaxCoupon) {
              const tempObj = res.data.discountMaxCoupon;
              const tempList = res.data.couponList;
              let index = tempList.findIndex(
                item => item.couponId === tempObj.couponId
              );
              const maxCouponInfo = tempList.find(
                item => item.couponId === tempObj.couponId
              );
              console.log("最大力度优惠券的索引", index);
              console.log("最大力度优惠券的信息", maxCouponInfo);
              this.couponUserIdList.push(maxCouponInfo.couponUserId)
              // 更新选中的优惠券的信息
              this.chosenCoupon = index;
              this.radioCouponsValue = index;
              this.couponPrice = (maxCouponInfo.finalCouponAmount).toFixed(2); // 计算优惠券的价格
              // this.couponPrice = (maxCouponInfo.value / 100).toFixed(2); // 计算优惠券的价格
              this.couponNo = maxCouponInfo.couponNo;
              this.couponUserId = maxCouponInfo.couponUserId

            }
              // 电子卡副卡支付逻辑待定
              this.$axios.$post('/electronic/deputy/exchange/card',{
                orderNo:res.data.ordNo,
                userId: this.$store.state.authen.userInfo.userId,
                genericBalance:res.data.genericBalance,
                balance:res.data.balance
              }).then(res1 => {
                if (res1.retCode == 0) {
                  this.genericIsUsedCard = res1.data.genericIsUsedCard
                  this.isUsedCard = res1.data.isUsedCard
                  this.curOrderData = res1.data
                  this.radioParamsVal()
                }
              })
          }
        })
        .catch(error => {
          // Toast({
          //   message: "确认订单信息失败，请重试"
          // });
          this.$toast("确认订单信息失败，请重试");
          this.CouponData = {};
          console.log(error);
        });
    },

    // input获取焦点
    onFocusField() {
      console.log("点击了金额输入框", this.currentOilEngineInfo);
      if (this.appType == 3) {
        return;
      }
      if (!this.oilGunNum || !this.oilGunName) {
        this.$refs.fieldRef.blur();
        return;
      }

      // 如果选择了油机订单时，不能二次编辑金额
      if (this.currentOilEngineInfo.id) {
        console.log("存在油机订单id");
        this.$refs.fieldRef.blur(); // 输入框失去焦点
        return;
      }
      // 不调动手机键盘
      this.$refs.fieldRef.blur();
      this.oilGunStatus = false;
      this.showKeyboard = true;
      this.showRemitPage = false;
    },
    // 取消支付播报
    async onCancel() {
      const res = await this.$axios.$get("/payOrder/cancel/broadcast", {
        params: {
          gunName: this.oilGunNum,
          enterpriseId: this.enterpriseId,
          stationId: this.stationId,
          orderNo: this.CouponData.ordNo,
          oilPersonId: this.userId
        }
      });
      if (res && res.retCode != 0) {
        throw new Error(`${res && res.message}`);
      }
    },
    // 立即支付
    async submitRemit() {
      // 使用副卡会重新创建订单号
      let curOrdNo

      if((this.radioParams == "1" && this.isUsedCard == 1) ||
      (this.radioParams == "3" && this.genericIsUsedCard == 1) ){
        let deputyId = this.radioParams =='1'? this.curOrderData.deputyCard.id : this.curOrderData.genericDeputyCard.id
      const { oilGunNum, phone, openId, stationId, newPrice } = this;
      const receivableAmt2=this.curOrderData.payOrderRequest.receivableAmt||null
      const data = {
        aliUserId: "1",
          appType: "1",
          cardFlag: "1",
          gunName: oilGunNum,
          mobilePhone: phone,
          newCreatefalg: "1",
          openId: openId,
          orderOriginType: "4",
          payType: "wx",
          receivableAmt:deputyId?receivableAmt2:newPrice,
          stationId,
          version: "1.0",
          userId: this.userId,
          utmSource: this.utmSource
      }
      let data2 = {...this.curOrderData.PayOrderRequest,deputyId}
      const res= await this.$axios.$post("/createOrder", {...data, ...data2})
        if (res.retCode == 0) {
          curOrdNo = res.data.ordNo;
        }
      }
      this.btnLoading = true;
      this.updateOrderByCouponLoading = true;
      this.isDisabled = true;
      const _this = this;
      const { openId, stationId } = this;
      let { ordNo } = this.CouponData;
      if (this.radioParams === "2") {
        //微信支付：根据接口返回的数据，在微信内拉起公众号支付，进行付款操作
        let data = {
          aliUserId: "1",
          newCouponFalg: "1",
          openId,
          ordNo,
          stationId
        };
        let payUrl = "/toThirdPayV2";
        await this.$axios
          .post(payUrl, data)
          .then(function(response) {
            if (response.data.retCode === 0) {
              if (_this.currentOilEngineInfo.id) {
                console.log("进入到油机订单~~~~");
                _this.$axios.post("/engine/record", {
                  id: _this.currentOilEngineInfo.id,
                  orderNo: ordNo
                });
              }
              const data = response.data.data;
              if (data.thirdPayment === "5") {
                _this.isShowPage = false;
                window.location.href = data.redirectUrl;
                // window.location.href = 'https://www.baidu.com/';

                return;
              } else {
                _this.isDisabled = true;
                WeixinJSBridge.invoke(
                  "getBrandWCPayRequest",
                  {
                    appId: data.payAppId,
                    timeStamp: data.payTimeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                    nonceStr: data.paynonceStr, // 支付签名随机串，不长于 32
                    package: data.payPackage, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                    signType: data.paySignType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                    paySign: data.paySign // 支付签名
                  },
                  function(res) {
                    if (res.err_msg === "get_brand_wcpay_request:ok") {
                      // 使用以上方式判断前端返回,微信团队郑重提示：
                      //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                      if (_this.couponUserId) {
                        _this.$axios
                          .post("/updateCouponUser", {
                            couponUserId: _this.couponUserId
                          })
                          .then(res => {
                            console.log(res);
                          });
                      }
                      // 更新油机订单状态， 如果选择了油机订单去支付才会更新订单
                      if (_this.currentOilEngineInfo.id) {
                        _this.updateOilEnginOrderStatus();
                      }
                      _this.$toast("支付成功");
                      _this.$router.replace({
                        path: `/${_this.enterpriseId}/fuel/success?ordNo=${ordNo}`
                      });
                      return;
                    } else {
                      _this.goOilGunSelect();
                      _this.onCancel();
                      _this.$toast("支付失败，请重试");
                    }
                  }
                );
                _this.isDisabled = false;
              }
            } else {
              _this.goOilGunSelect();
              _this.$toast("获取支付信息失败，请重试");
            }
          })
          .catch(function(error) {
            _this.goOilGunSelect();
            _this.$toast("获取下单信息失败，请重试");
            _this.isDisabled = false;
            console.log(error);
          });
      } else if (_this.radioParams === "1" || _this.radioParams === "3") {
        //  radioParams ： 1 储值卡    3 通用卡
        let genericPay = _this.radioParams === "3" ? true : false;

        // 判断电子卡是否重复支付
        let repeatPayInfo = await _this.$axios.$get("/checkDzkRepeatPay", {
          params: {
            ordNo:  curOrdNo? curOrdNo : ordNo
          }
        });
        if (repeatPayInfo.retCode === -1) {
          _this.isRepeatPayshow = true; // 打开重复支付弹框
          this.curOrdNo = curOrdNo? curOrdNo : ordNo
        } else {
          _this.isRepeatPayshow = false;

          // 获取免密支付信息
          let info = await _this.$axios.$get("/selectfree", {
            params: {
              enterpriseId: this.enterpriseId,
              mobilePhone: this.phone
            }
          });
          this.nonsecretInfo = info.data;

          // 判断是否开启了免密 （isFree：  0 表示开启免密，1 表示关闭免密 ）.  如果是1显示密码框
          if (info.data.isFree === "1") {
            this.password = "";
            this.isShowPasswdKeyboard = true;
          } else {
            // 此处拼接 优惠券单选和多选
            let couponUserIdList = this.getCouponUseIdList()
            const params = {
              ordNo: curOrdNo? curOrdNo : ordNo,
                  // couponUserId: _this.couponUserId,
                  couponUserId:couponUserIdList,
                  genericPay: genericPay,
                  useReturnCash:_this.checked? true:false
            }
            await _this.$axios
              .$get("/newDzkCouponPaySetV4", {params})
              .then(res => {
                if (res.retCode != 0) {
                  _this.goOilGunSelect();
                  throw new Error("支付失败!" + res.message);
                } else {
                  _this.$toast("支付成功");
                  // 更新油机订单状态， 如果选择了油机订单去支付才会更新订单
                  if (_this.currentOilEngineInfo.id) {
                    _this.updateOilEnginOrderStatus();
                  }
                  _this.$router.replace({
                    path: `/${_this.enterpriseId}/fuel/success?ordNo=${curOrdNo? curOrdNo : ordNo}`
                  });
                }
              })
              .catch(err => {
                _this.goOilGunSelect();
                alert(err);
              });
          }
        }
      } else {
        _this.goOilGunSelect();
        return;
      }

      this.btnLoading = false;
      this.updateOrderByCouponLoading = false;
      this.isDisabled = false;
    },

    //储值卡的密码 确认按钮， 继续支付按钮 --- 校验密码
    async checkPassword() {
      let { ordNo } = this.CouponData;
      //  radioParams ： 1 储值卡    3 通用卡
      let genericPay = this.radioParams === "3" ? true : false;

      if (!this.password) {
        this.$dialog
          .alert({
            message: "请输入密码"
          })
          .then(() => {
            this.isShowPasswdKeyboard = true; // 打开密码框
          });
        return;
      }

      // 密码校验
      const res = await this.$axios.$post("/check", {
        ids: this.nonsecretInfo.ids, // 电子卡的id集合
        payPassword: this.password
      });
      if (res.data) {
        // 此处拼接 优惠券单选和多选
        let couponUserIdList = this.getCouponUseIdList()

        await this.$axios
          .$get("/newDzkCouponPaySetV4", {
            params: {
              ordNo: ordNo,
              couponUserId: couponUserIdList,
              genericPay: genericPay,
              useReturnCash:this.checked? true:false
            }
          })
          .then(res => {
            if (res.retCode != 0) {
              this.goOilGunSelect();
              throw new Error("支付失败!" + res.message);
            } else {
              this.$toast("支付成功");
              if (this.currentOilEngineInfo.id) {
                this.updateOilEnginOrderStatus();
              }
              this.$router.replace({
                path: `/${this.enterpriseId}/fuel/success?ordNo=${ordNo}`
              });
            }
          })
          .catch(err => {
            this.goOilGunSelect();
            alert(err);
          });
      } else {
        this.$dialog
          .confirm({
            message: res.message,
            confirmButtonText: "重试"
          })
          .then(res => {
            console.log("确认重试", res);
            this.password = "";
            this.isShowPasswdKeyboard = true;
          })
          .catch(err => {
            console.log("取消输入密码");
            this.isShowPasswdKeyboard = false;
          });
      }
    },

    // 重复支付提示的继续支付
    async continuePay() {
      const _this = this;
      // let { ordNo } = this.CouponData;
      let genericPay = _this.radioParams === "3" ? true : false; // true ： 使用通用卡   false:使用储值卡

      // 获取免密支付信息
      let info = await _this.$axios.$get("/selectfree", {
        params: {
          enterpriseId: this.enterpriseId,
          mobilePhone: this.phone
        }
      });
      this.nonsecretInfo = info.data;
      // 判断是否开启了免密  0 表示开启免密，1 表示关闭免密
      if (info.data.isFree === "1") {
        this.password = "";
        this.isShowPasswdKeyboard = true; // 弹出密码框
      } else {
        let couponUserIdList = this.getCouponUseIdList()
        await _this.$axios
          .$get("/newDzkCouponPaySetV4", {
            params: {
              ordNo:this.curOrdNo,
              couponUserId:couponUserIdList,
              genericPay: genericPay,
              useReturnCash:_this.checked? true:false
            }
          })
          .then(res => {
            if (res.retCode != 0) {
              _this.goOilGunSelect();
              // throw new Error("储值卡支付失败");
              throw new Error("支付失败!" + res.message);
            } else {
              _this.$toast("支付成功");
              // 更新油机订单状态
              if (_this.currentOilEngineInfo.id) {
                _this.updateOilEnginOrderStatus();
              }
              _this.$router.replace({
                path: `/${_this.enterpriseId}/fuel/success?ordNo=${this.curOrdNo}`
              });
            }
          })
          .catch(err => {
            _this.goOilGunSelect();
            alert(err);
          });
      }
    },

    // 查询油机订单列表
    async getOilEnginOrderList() {
      const res = await this.$axios.$post("/engine/list", {
        oilGun: this.oilGunNum,
        stationId: this.stationId
      });
      this.oilEnginOrderList = res.data;
      this.isShowOilEnginDialog = true; // 打开油机订单弹框
    },

    // 查询没有油机订单时，点击了手动输入
    handleManualInput() {
      this.isShowOilEnginDialog = false;
      this.currentOilEngineInfo = {}; // 清空当前选择的油机订单信息
      this.priceValue = "";
    },

    // 选择一个油机订单
    selectOilEnginItem(item) {
      console.log(item);
      this.currentOilEngineInfo = item;
      this.priceValue = String(item.totalPrice); // 输入框的金额
      this.isShowOilEnginDialog = false; // 关闭油机订单弹框
      this.showKeyboard = false; // 隐藏输入金额数字键盘
      this.onCloseKeyboard(); // 直接调用确认金额事件，去创建订单
    },

    // 更新油机订单状态
    updateOilEnginOrderStatus() {
      this.$axios.$post("/engine/payment", {
        id: this.currentOilEngineInfo.id,
        orderNo:this.CouponData.ordNo
      });
      console.log("更新油机订单状态成功");
    },

    // 自动切换支付渠道
    changeAutoPayWay() {
      this.$axios.$post("/changeAutoPayWay", {
        oilGun: this.oilGunNum,
        stationId: this.stationId
      });
    }
  }
  // beforeRouteEnter(to,from,next){
  //     const stationId=to.query.stationId
  //     const appType=to.query.appType
  //     console.log('appType',appType);
  //     console.log('appType',to);
  //     if(stationId&&appType!=3){
  //       next(async vm=>{
  //         const res=await vm.$axios.$get("/selectStationInfo",{params:{stationId}})
  //         if(res&&res.retCode==0){
  //           if(res&&res.data&&res.data.multipleOilPayFlag==1){
  //             vm.$router.replace({path:`/${vm.enterpriseId}/fuel/remitDieselOil`,query:to.query})
  //           }
  //         }else{
  //           vm.$toast.fail(res&&res.message)
  //         }
  //       })
  //     }
  //     if(appType==3){
  //       next()
  //     }
  // }
};
</script>

<style lang="scss" scoped>
.remitDiv {
  background-color: rgb(245, 246, 247);
  min-height: 100vh;
  position: relative;
  padding-bottom: 3rem;
  overflow: auto;
}
.top_bg {
  width: 100vw;
  height: 4rem;
  // background: url("../static/fuel/pay-bg.png") no-repeat;
  background: url("../../../static/fuel/pay-bg.png") no-repeat;
  background-size: 100% 100%;
}
.loadingName {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  p {
    font-size: 18px;
    font-weight: bold;
    color: #666666;
  }
}
// 油机订单弹框列表css
.order_engin_list {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .empty {
    width: 90%;
    .header {
      font-size: 0.3rem;
    }
    .bottom {
      display: flex;
      align-items: center;
      font-size: 0.3rem;
      justify-content: space-between;
    }
  }
  .order_engin_item {
    width: 6rem;
    height: 1.5rem;
    background: #249bff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 0.2rem;
    padding: 0.2rem;
    margin-bottom: 0.2rem;
    .p1 {
      margin: 0;
      .gunNumber {
        font-size: 0.4rem;
        color: #ffe04f;
        font-weight: bold;
      }
      .gunName {
        font-size: 0.25rem;
        color: #ffe04f;
      }
    }
    .p2 {
      margin: 0;
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      color: #fff;
      .price {
        font-size: 0.28rem;
        b {
          font-size: 0.5rem;
          font-weight: bold;
        }
      }
      .time {
        font-size: 0.28rem;
        color: #ffe04f;
      }
    }
  }
}

::v-deep .field_price > div:nth-child(1) {
  width: 1em;
  height: auto;
}

.fuel_remit_wraper {
  box-sizing: border-box;
  // min-height: 100vh;
  width: 90vw;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0.3rem;

  // &.active {
  //   // background-color: #fff;
  // }

  .fuel_remit_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.32rem 0.24rem;
    background-color: #fff;
    border-bottom: 2px dashed #f5f5f5;
    border-radius: 0.3rem 0.3rem 0rem 0rem;

    .icon_fixed {
      width: 0.32rem;
      height: 0.32rem;
      // background: url("../static/fuel/fixed.png") no-repeat 0 0;
      background: url("../../../static/fuel/fixed.png") no-repeat 0 0;
      background-size: 100% 100%;
    }

    .name {
      font-size: 0.32rem;
      max-width: 80vw;
      color: #333;
    }

    .icon_right {
      width: 0.32rem;
      height: 0.32rem;
      background: url("../../../static/fuel/right.png") no-repeat 0 0;
      // background: url("../static/fuel/right.png") no-repeat 0 0;
      background-size: 100% 100%;
    }
  }

  .van-number-keyboard {
    &.disabold .van-key--blue {
      background-color: #eaeaea;
    }
  }

  .remit_container {
    .oilGun_container {
      background-color: rgb(245, 246, 247);
      .fuel_remit_top {
        padding: 0.24rem;
        box-sizing: border-box;
        width: 100%;
        background-color: #fff;
        border-radius: 0rem 0rem 0.3rem 0.3rem;

        &.active {
          padding-bottom: 0.2rem;
          border-radius: 0rem 0rem 0.3rem 0.3rem;
        }

        .oilGun_info {
          min-height: 0.52rem;
          margin-top: 0.3rem;
          border-top: 1px solid #e5e5e5;
          padding-top: 0.3rem;

          .oilGun_info_top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            .oilGun_title {
              font-size: 0.32rem;
              font-weight: 500;
              margin-right: 0.32rem;
              color: #333;
            }

            .oilGun_placeholder {
              color: #aeaeae;
              font-size: 0.28rem;
              font-weight: 500;
            }
          }

          .oli_icon_close {
            width: 0.28rem;
            height: 0.28rem;
            background: url("../../../static/fuel/close.png") no-repeat 0 0;
            // background: url("../static/fuel/close.png") no-repeat 0 0;
            background-size: 100% 100%;
            position: absolute;
            right: 0.24rem;
          }

          .oilGun_value {
            padding-right: 0.4rem;
            color: #333;

            .num {
              font-size: 0.4rem;
              font-weight: 600;
            }

            .name {
              font-size: 0.28rem;
            }
          }

          .price {
            color: #999;
            font-size: 0.27rem;
            margin-top: 0.3rem;
          }
          .manjian {
            color: #999;
            border-top: 1px solid #ddd;
            padding-top: 0.2rem;
            margin-top: 0.3rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            font-size: 0.29rem;
            div {
              width: 75%;
              text-align: right;

              p {
                padding: 0;
                margin: 0rem 0rem 0.1rem 0rem;
                span {
                  color: #32af51;
                }
              }
            }
          }
        }

        .divider_line {
          position: relative;
          width: 100%;
          margin: 0.16rem 0;
          background: #fff;

          // &.active {
          //   // background-color: #98cda7;
          // }

          &.input {
            margin: 0;
            background: #fff;

            .price_list {
              display: flex;
              margin-top: 0.2rem;
              margin-bottom: 0.3rem;
              background: #fff !important;

              .price_value {
                width: 1.64rem;
                text-align: center;
                height: 0.7rem;
                line-height: 0.7rem;
                font-size: 0.26rem;
                background-color: #fff;
                border: 1px solid #f6f6f6;
                margin-right: 0.1rem;
                border-radius: 0.16rem;
                display: flex;
                justify-content: center;
                align-items: center;

                &:nth-child(4n) {
                  margin-right: 0;
                }
              }
            }

            // &.active {
            //   // background-color: #98cda7;
            // }
          }
        }

        .amount_of_money {
          .amount_of_money_title {
            font-size: 0.32rem;
            font-weight: 500;
            margin-bottom: 0.2rem;
            color: #333;
          }

          .field_price {
            height: 1rem;
            background: #f7f9fc;
            border: 1px solid #e5e5e5;
            border-radius: 0.2rem;
            display: flex !important;
            flex-direction: row;
            align-items: center !important;

            &.placeStyle .van-field__body input {
              font-size: 0.4rem;
              font-weight: 600;
            }

            /deep/.van-field__body {
              font-size: 0.4rem;
              font-weight: 600;
            }
            .icon_close {
              width: 0.28rem;
              height: 0.28rem;
              background: url("../../../static/fuel/close.png") no-repeat 0 0;
              // background: url("/../static/fuel/close.png") no-repeat 0 0;
              background-size: 100% 100%;
            }

            .van-field__body {
              input {
                font-size: 0.4rem;
                font-weight: 600;
              }
            }

            .discountAmt {
              font-size: 0.28rem;
              color: #32af51;
            }

            .van-field__label {
              color: #333;
              font-size: 0.32rem;
              font-weight: 500;
              width: auto;
              margin-right: 0.32rem;
            }
          }

          // .van-cell {
          //   padding: 6px 16px;
          // }
        }
      }

      .oilGun_main_wraper {
        display: flex;
        flex-direction: column;
        align-items: center;
        // padding: 0 0.24rem;
        margin-top: 0.52rem;

        .oilGun_main_title {
          height: 1.1rem;
          line-height: 1.1rem;
          font-size: 0.28rem;
          font-weight: 600;
        }

        .oilGun_main_content {
          width: 100%;
          display: flex;
          flex-wrap: wrap;

          .main_card {
            position: relative;
            width: 1.9rem;
            height: 0.8rem;
            margin: 0rem 0.2rem 0.2rem 0rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            background: #f7f9fc;
            border: 1px solid #e5e5e5;
            border-radius: 0.16rem;
            overflow: hidden;

            &.active {
              // background-color: #34b053;
              border: 1px solid #fd6b00;
              opacity: 0.8;
              color: #fd6b00;

              .gunName {
                color: #fd6b00;
              }

              .oilName {
                color: #fd6b00;
              }

              .active_icon {
                display: inline-block !important;
              }
            }

            &:nth-child(3n) {
              margin: 0 0 0.08rem 0;
            }

            .line {
              margin-right: 0.04rem;
              margin-left: 0.06rem;
            }

            .gunName {
              font-size: 0.36rem;
              font-weight: 600;
              color: #333;
              margin-bottom: 0.1rem;
            }

            .oilName {
              font-size: 0.24rem;
              // color: #fd6b00;
            }

            .active_icon {
              width: 14px;
              height: 10px;
              position: absolute;
              right: 0;
              bottom: 0;

              img {
                width: 100%;
              }
            }
          }
        }
      }

      .remit_page_container {
        background-color: #fff;
        padding: 0.3rem;
        margin-top: 0.4rem;
        border-radius: 0.3rem;

        .remit_page_wraper {
          // padding: 0.32rem 0.28rem 0.4rem;
          // background-color: #f6f6f6;
          // border-radius: 0.2rem;

          .stored_radio {
            height: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .stored_card {
              display: flex;
              align-items: center;
              font-size: 0.32rem;
              font-weight: 600;
              color: #333;
              margin-left: 0.16rem;

              .icon {
                width: 0.6rem;
                height: 0.6rem;
                margin-right: 0.16rem;
                border: 1px dashed #ddd;

                &.stored {
                  // background: url("../../../static/vip/a1.svg") no-repeat 0 0;
                  background: url("../../../static/fuel/pay-cxk.png") no-repeat
                    0 0;
                  // background: url("../static/fuel/pay-cxk.png") no-repeat 0 0;
                  background-size: 100% 100%;
                }

                &.vx {
                  // background: url("../../../static/fuel/vx_remit.png") no-repeat
                  background: url("../../../static/fuel/pay-wx.png") no-repeat 0
                    0;
                  // background: url("../static/fuel/pay-wx.png") no-repeat 0
                  // 0;
                  background-size: 100% 100%;
                }
              }
            }
          }

          .stored_amt {
            font-size: 0.24rem;
            color: #9095ad;
            padding: 0.1rem 0rem;
          }

          .divider_line {
            width: 100%;
            height: 1px;
            margin: 0.16rem 0;
            background-color: #eee;
          }
        }
      }
      .coupon_info_2 {
        height: 1.3rem;
        margin-top: 0.3rem;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 0rem 0.3rem 0rem 0.46rem;
        border-radius: 0.3rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.32rem;
        font-weight: 600;

        img {
          width: 0.6rem;
          height: 0.6rem;
          margin-right: 0.16rem;
          border: 1px dashed #ddd;
        }
      }
      .coupon_modle{
        margin-bottom: 1.375rem;
      }
      .coupon_info {
        height: 1.3rem;
        margin-top: 0.3rem;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 0rem 0.3rem 0rem 0.46rem;
        border-radius: 0.3rem;
        ::v-deep .van-cell__value{
          flex: 1;
          padding-right: 0.2rem;
        }
        ::v-deep .van-cell__title{
          flex: unset;
        }
        .van-cell {
          display: flex;
          flex-direction: row;
          align-items: center;
          background-color: transparent;
          flex: 1;
          padding: 10px 0px;
          font-size: 0.32rem;
          font-weight: 600;
        }

        img {
          width: 0.6rem;
          height: 0.6rem;
          margin-right: 0.16rem;
          border: 1px dashed #ddd;
        }
      }
    }
  }

  .popup_container {
    .title {
      width: 100%;
      text-align: center;
      height: 1.5rem;
      line-height: 1.5rem;
      font-size: 0.36rem;
      font-weight: 600;
    }

    .popup_main {
      .popup_name {
        box-sizing: border-box;
        padding: 0 0.2rem;
        width: 100%;
        background-color: #f5f6f7;
        height: 0.8rem;
        line-height: 0.8rem;
      }

      .popup_price {
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 0.8rem;
        padding: 0 0.2rem;

        .tag {
          color: #666;
        }

        .price {
          color: #666;
        }
      }

      // .popup_preferential {
      // }
    }
  }

  .coupons_popup_container {
    position: relative;
    .title {
      width: 100%;
      text-align: center;
      height: 1.1rem;
      line-height: 1.1rem;
      font-size: 0.36rem;
      font-weight: 600;
    }
    .coupons_btns {
      position: absolute;
      bottom: 20px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      width: 100%;
      ::v-deep .van-button {
        width: 3rem !important;
      }
    }
    .van_popup_main_scroll {
      height: 80%;
      overflow-y: auto;
    }
    .right_popup_more {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 4rem;
      }
      .name {
        width: 1.5rem;
        text-align: center;
        height: 0.6rem;
        line-height: 0.6rem;
        // background-color: #fad25e;
        border-radius: 0.6rem;

        &.red {
          background-color: #ed9381;
        }
      }

      // .title {
      // }
    }

    .van_popup_main {
      .popup_list {
        box-sizing: border-box;
        padding: 0.3rem;
        margin: 0.3rem;
        background-color: #f5f6f7;
        border-radius: 0.16rem;
        display: flex;

        .left_popup {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 2.2rem;
          height: 1.7rem;
          // background: url("../../../static/coupon/quan1.2x.png") no-repeat 0 0;
          // background: url("../static/coupon/quan1.2x.png") no-repeat 0 0;
          background-size: 100% 100%;
          color: #fff;
          margin-right: 8px;

          .valueDesc {
            font-size: 0.4rem;
            margin-bottom: 0.32rem;
          }

          .condition {
            font-size: 0.28rem;
          }

          &.red {
            background: url("../../../static/coupon/quan2.2x.png") no-repeat 0 0;
            // background: url("../static/coupon/quan2.2x.png") no-repeat 0 0;
            background-size: 100% 100%;
          }
        }

        .right_popup {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .name {
            width: 1.5rem;
            text-align: center;
            height: 0.6rem;
            line-height: 0.6rem;
            // background-color: #fad25e;
            border-radius: 0.6rem;

            &.red {
              background-color: #ed9381;
            }
          }

          // .title {
          // }
        }

        .radio {
          position: absolute;
          right: 0.32rem;

          input {
            zoom: 1.5;
          }
        }
      }
    }
  }
}

.bottom_fix_bar {
  // z-index: 9999;
  width: 100%;
  position: fixed;
  background-color: #fff;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0rem;

  .fix_bar_main {
    width: 90vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;

    .car_container {
      display: flex;
      align-items: center;
      flex: 1;
      // border-top: 1px solid #eee;

      .icon_car {
        width: 0.6rem;
        height: 0.4rem;
        margin-right: 0.3rem;
        margin-left: 0.36rem;

        .van-info {
          background-color: #32af51;
        }
      }

      .price_bar {
        font-size: 0.28rem;
        color: #fc474b;

        .price_value {
          font-size: 0.32rem;
          font-weight: 600;
        }
      }

      .price_coupon {
        font-size: 0.2rem;
        color: #999;
        // font-weight: 500;

        .coupon_value {
          color: #32af51;
        }
      }
    }

    .van-button--warning {
      background-color: #fd6b00;
      height: 0.9rem;
    }

    .van-button--normal {
      padding: 0 23px;
    }
  }
}

.oil-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 80%;
  width: 300px;
  justify-content: space-between;
  align-content: baseline;
  overflow-y: scroll;
  margin-top: 10px;

  .oil-items {
    width: 49%;
    height: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
    margin-top: 0.2rem;
    border-radius: 5px;

    span {
      font-size: 16px;
    }

    .line {
      margin-right: 0.04rem;
      margin-left: 0.06rem;
    }

    .gunName {
      font-size: 0.4rem;
      font-weight: 600;
      color: #333;
      margin-bottom: 0.1rem;
    }

    .oilName {
      font-size: 0.28rem;
      // color: #fd6b00;
    }
  }

  // .oil-items:last-child {
  //   margin-bottom: 50px;
  // }
}

.oil-box::-webkit-scrollbar {
  display: none;
}

.oil-title {
  width: 300px;
  text-align: center;
  border-bottom: 1px solid #333;
  padding: 20px 0 10px 0;

  span {
    font-size: 19px;
    font-weight: 400;
    display: inline-block;
  }
}
.carwash {
  background: url("../../../static/coupon/quan5.2x.png") no-repeat 0 0;
  background-size: 100% 100%;
  &.name {
    background: #19c79b;
  }
}

.direct {
  background: url("../../../static/coupon/quan1.2x.png") no-repeat 0 0;
  background-size: 100% 100%;
  &.name {
    background: #f8ce57;
  }
}
.reduction {
  background: url("../../../static/coupon/lijian.png") no-repeat 0 0;
  background-size: 100% 100%;
  &.name {
    background: #eb6ba4;
  }
}
.rate {
  background: url("../../../static/coupon/quan2.2x.png") no-repeat 0 0;
  background-size: 100% 100%;
  &.name {
    background: #eb8573;
  }
}
.exchange {
  background: url("../../../static/coupon/quan3.2x.png") no-repeat 0 0;
  background-size: 100% 100%;
  &.name {
    background: #19c79b;
  }
}
.expired {
  background: url("../../../static/coupon/quan4.2x.png") no-repeat 0 0;
  background-size: 100% 100%;
  &.name {
    background: #bfbfbf;
  }
}
.tongyong {
  background: url("../../../static/coupon/quan6.png") no-repeat 0 0;
  background-size: 100% 100%;
  &.name {
    background: #19c79b;
  }
}
</style>
